<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{background-color:#c0c6c9; font-size:12px;}
#sbox02{position:relative; width:1020px;}
#sbox02 li{float:left; list-style:none;}
#sbox02 .panel{width:960px; height:135px;overflow:hidden;}
#sbox02 .panel a{margin:0 15px;}
#sbox02 .panel img{border:0;width:290px;height:135px;}
#sbox02 .panel p{display:block; position:absolute; top:123px; width:290px; height:0px; line-height:30px; background:url(data/img/slides/tencent/sprites1.png); text-align:center; color:#fff; overflow:hidden;}
#sbox02 .prev{width:30px;height:140px;cursor:pointer;background:url(data/img/slides/tencent/sprites1.png) 0 -110px;}
#sbox02 .next{width:30px;height:140px;cursor:pointer;background:url(data/img/slides/tencent/sprites1.png) -30px -110px;}
.say{clear:both; margin:40px;}
</style>
<script type="text/javascript" src="1st.js"></script>
</head>

<body>
<h3>腾讯游戏宣传幻灯片示例</h3>
<ul id="sbox02">
	<li class="prev"></li>
	<li class="panel">
		<div class="wrap">
			<a href="javascript:void(0);"><img src="data/img/slides/tencent/lol.jpg" /><p>英雄联盟不删档官网</p></a>
			<a href="javascript:void(0);"><img src="data/img/slides/tencent/dsz.jpg" /><p>你疯啦官方网站</p></a>
			<a href="javascript:void(0);"><img src="data/img/slides/tencent/c9.jpg" /><p>第九大陆官网</p></a>
			<a href="javascript:void(0);"><img src="data/img/slides/tencent/lrtk.jpg" /><p>懒人图库 搜集整理</p></a>
			<a href="javascript:void(0);"><img src="data/img/slides/tencent/speed1.jpg" /><p>QQ飞车官网</p></a>
			<a href="javascript:void(0);"><img src="data/img/slides/tencent/qqxy.jpg" /><p>麦田圈官方网站</p></a>
		</div>
	</li>
	<li class="next"></li>
</ul>
<p class="say"><br/>说明：腾讯6图切换JS代码，鼠标移动到图片上有文字显示，左右可平滑滚动</p>

<script type="text/javascript">
F("sbox02").slides({
	panel: "scrollLeft",
	loop: 2,
	init: function(me){
		me.panel.first().tags("a").each(function(){
			var p = this.last().opacity(0.75);
			var ani, timer;
			this.first().hover(function(){
				ani && ani.stop();
				ani = p.height(0).top(123).anime({height:30,hs:1,duration:300});
			},function(){
				ani && ani.stop();
				p.height(30).top(93).anime({height:0,hs:1,duration:300});
			});
			/*
			a.first().node.onmouseover = function(){
				window.clearTimeout(timer);
				timer = window.setTimeout(function(){
					ani && ani.stop();
					ani = p.height(0).top(123).anime({height:30,hs:1,duration:300});												   
				},50);
			};
			
			a.first().node.onmouseout = a.last().node.onmouseout = function(){
				window.clearTimeout(timer);
				timer = window.setTimeout(function(){
					ani && ani.stop();
					p.height(30).top(93).anime({height:0,hs:1,duration:300});												   
				},100);
			};
			*/
			
		});
	}
});
</script>
</body>
</html>
